{% extends "base_petadmin.html" %}

{% block mainheading %}List of track records list (Forex){% endblock %}

{% block object-tools %}

    <ul class="object-tools">
        <li><a href="#" onclick="OpenTrackRecordsPopup(500, 650, '/tracking/getcreate/forex/?year={{ month_year_link.current_year }}&month={{ month_year_link.current_month }}'); return false;" class="addlink">Add entry</a></li>
        <li><a href="/tracking/forex/importtext/?year={{ month_year_link.current_year }}&month={{ month_year_link.current_month }}">Import Forex text</a></li>
        <li><a href="/maintain/cc/">Clear cache</a></li>
        {# <li><a href="/tracking/forex/importfile/">Import Forex CSV</a></li> #}
        {# <li><a href="#" onclick="jQuery('#AddFormDiv').show(); return false;" class="addlink">Add entry</a></li> #}
    </ul>

{% endblock %}


{% block content %}

{% include "tracking/_links.html" with month_year_link=month_year_link %}

    <table>
        <thead>
        <tr>
            <th>Date</th>
            <th>Market</th>
            <th>Fee</th>
            <th nowrap>Min mov</th>
            <th>Dir</th>
            <th>Entry</th>
            <th>Exit</th>
            <th nowrap>PL_pips</th>
            <th nowrap>PL_pipsf</th>
            <th>XXX</th>
            <th>YYY</th>
            <th>EURXXX</th>
            <th>EURYYY</th>
            <th nowrap>PL_pips/ EURYYY</th>
            <th nowrap>PL_pipsf/ EURYYY</th>
            <th></th>
        </tr>
        </thead>
    
        <tbody id="TrackRecordsForexTbody">
            {# Ajax loading #}
            <tr>
                <td colspan="17"><img src="http://jrc.play-and-think.com/images/ajaxloading.gif" /></td>
            </tr>

        </tbody>
    </table>
    
<div id="TrackRecordsMask" style="display: none; z-index: 300; background: #d3d3d3; position: absolute; top: 0px; left: 0px; opacity: 0.9;"></div>
<div id="TrackRecordsPopupDiv" style="display: none; z-index: 301; background: #ffffff; position: absolute; border-radius: 10px; border: solid 1px black;">
    <div id="TrackRecordsClose" style="text-align: right; padding-right: 2px; padding-top: 2px;">
        <a href="#" onclick="CloseTrackRecordsPopup(); return false;"><img src="http://jrc.play-and-think.com/images/close.png" alt="Close window" width="16" height="16" /></a>
    </div>
    <div id="TrackRecordsMsg" style="display: none; text-align: center;">.</div>
    <div id="TrackRecordsLoadable" style="padding-left: 10px;"></div>
</div>


    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>

    <script type="text/javascript" src="http://jrc.play-and-think.com/js/jrc.js"></script>
    <script type="text/javascript">
    
        var gIsTracksLoaded = true;
        var gTrackRecordMsgDiv = null;
        var gTrackType = "forex";
        var gCurrentYear = {{ month_year_link.current_year }};
        var gCurrentMonth = {{ month_year_link.current_month }};
        
        // To load accumulated P/L charts
        var gArProfitLossesAndFeesData = [];
//        var gArPips = [];

        // To load accumulated P/L (in EUR)
        var gArProfitLossesAndFeesEurData = [];

        // Marktes totals (first should be blank!)
        var gArMarketsNames = [""];
        var gArMarketsTotals = [""];

        // Markets totals
        var gArMarketsNamesAndTotals = [];
        var gMarketsTotalsMin = 0;
        var gMarketsTotalsMax = 0;

        function BuildTrackRecordsForexCharts()
        {
            {# Do not load for current month #}
            if( {{ current_month }} )
            {
//                return;
            }

            /**
             *  Draw P/L and fees
             */
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'x');
            data.addColumn('number', 'P/L (akk.)');
            data.addColumn('number', 'Fees (akk.)');
//            alert("Profit/losses and fees charts data: " + gArProfitLossesAndFeesData.length);
            for(var i = 0; i < gArProfitLossesAndFeesData.length; i++)
            {
                data.addRow(gArProfitLossesAndFeesData[i]);
            }
            // Create and draw the visualization.
            new google.visualization.LineChart(
                document.getElementById('visualization1')).draw(
                    data
                    , {
                        curveType: "function"
                        , width: 800
                        , height: 400
                        , vAxis: {maxValue: 10}
                    });

        /**
         *  Draw P/L w/o and w/ fees (in EUR-transfered pips)
         */
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'x');
        data.addColumn('number', 'EUR pips');
        data.addColumn('number', 'EUR pips (fees)');
//        alert("Profit/losses and fees (EUR) charts data: " + gArProfitLossesAndFeesEurData.length);
        for(var i = 0; i < gArProfitLossesAndFeesEurData.length; i++)
        {
            data.addRow(gArProfitLossesAndFeesEurData[i]);
        }
        // Create and draw the visualization.
        new google.visualization.LineChart(
            document.getElementById('visualization2')).draw(
                data
                , {
                    curveType: "function"
                    , width: 800
                    , height: 400
                    , vAxis: {maxValue: 10}
                });


            // Create and populate the data table.
            var wrapper = new google.visualization.ChartWrapper({
                chartType: 'ColumnChart',
                dataTable: [gArMarketsNames, gArMarketsTotals],
                options: {'title': 'Markets'},
                containerId: 'visualization3'
            });
            wrapper.draw();

        }

    </script>

	<div id="visualization1" style="width: 800px; height: 400px;"></div>
    <div id="visualization2" style="width: 800px; height: 400px;"></div>
    <div id="visualization3" style="width: 800px; height: 400px;"></div>

{% endblock %}

{% block js_on_load %}

    LoadTrackRecordsForex({{ month_year_link.current_year }}, {{ month_year_link.current_month }});
    
    {{ block.super }}

{% endblock %}

